<template>
	<view>
		<my-navbar leftText="选择优惠券"  @leftClick="back" :rightText="nav.text" :rightColor="nav.color" @rightClick="submit"></my-navbar>
		<view class="content">
			<u-radio-group v-model="nowSelect">
				<u-radio  v-for="(item,index) in list" :name="item.id" :key="index" active-color="#40AE36">
					<view class="copon_box copon flex-btw">
						<view class="left flex-center">{{item.coupons.type==1?'普通券':'现金券'}}</view>
						<view class="center flex-btw">
							<view class="center_left">
								<view class="price">￥{{item.coupons.money}}</view>
								<view class="info" @click.stop="alertInfo(item.coupons.describe)">
									<u-icon name="question-circle"></u-icon>
									<text class="info_text">使用说明</text>
								</view>
							</view>
							<view class="center_right">
								<view class="rule" v-if="item.coupons.type==1">满{{item.coupons.order_money_limit}}使用</view>
								<view class="rule" v-else-if="item.coupons.type==2">无门槛</view>
								<view class="limit" v-if="item.coupons.get_limit">每位用户限制{{item.coupons.get_num}}张</view>
								<view class="limit" v-else>不限量</view>
								<view class="time flex-center" v-if="item.coupons.expire_type==1">{{parseTime(item.coupons.start_time)}}~{{parseTime(item.coupons.end_time)}}</view>
								<view class="time flex-center" v-else-if="item.coupons.expire_type==2">限{{item.coupons.expire_days}}天内使用</view>
							</view>
						</view>
						<view class="right">去使用</view>
					</view>
					
				</u-radio>
			</u-radio-group>
		</view>
		<u-modal v-model="info.show" :content="info.value" title="使用说明" confirm-color="#40AE36"></u-modal>
	</view>
</template>

<script>
	import {$https} from '@/static/js/request.js';
	export default {
		data() {
			return {
				nav:{
					text:'确定',
					color:'#40AE36'
				},
				page:1,
				count:0,
				list:[],
				info:{
					value:'',
					show:false,
				},
				nowSelect:null,
			};
		},
		onLoad(){
			// this.getData(1);
		},
		onReady(){
			uni.$once('getSubOrdCou',data=>{
				this.showList(data);
			})
		},
		methods:{
			getData(page){
				var params = {
					size:20,
					page,
					status:0,
				}
				$https('GET','getMyCouponsList',params,res=>{
					if(res.data.errcode==0){
						this.page = page;
						if(page==1){
							this.list = res.data.data.list;	
							this.nowSelect = this.list[0].id;
						}else{
							let oldData = this.list;
							this.list = oldData.concat(res.data.data.list);	
						}
						this.count = res.data.data.count;
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon:'none'
						});
					}
				})					
			},
			showList(data){
				this.list = data.couponInfo.coupons_list;
				this.nowSelect = data.couponInfo.coup_id;
			},
			submit() {
				uni.$emit('selectCoupon',{id:this.nowSelect});
				uni.navigateBack();
			},
			alertInfo(info){
				this.info.value = info;
				this.info.show = true;
			},
			parseTime(time){
				time = time*1000;
				var date = new Date(time);
				var year = date.getFullYear(),
					month = date.getMonth()+1 <9 ? '0'+(date.getMonth()+1) : date.getMonth()+1,
					day = date.getDate() <9 ? '0'+date.getDate() :date.getDate();
				return `${year}-${month}-${day}`
			},
			back(){
				// #ifdef H5
					window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
		},
		// onReachBottom(){
		// 	if(this.list.length<this.count){
		// 		this.page++;
		// 		this.getData(this.page);
		// 	}
		// },
	}
</script>

<style lang="scss">
/deep/.uicon-checkbox-mark:before{
	transform: scale(.7);
}
.content{
	padding:20rpx 0;
	.u-radio{
		margin:auto;
	}
	.copon_box{
		width:638rpx;
		height:164rpx;
		background:url(../../../static/image/coupon.png) no-repeat;
		background-size:100% 100%;
		padding:0 30rpx;
		margin-bottom:20rpx;
		.left{
			min-height: 150rpx;
			width:40rpx;
			word-wrap: wrap;
			font-size: 28rpx;
			line-height: 35rpx;
			border-radius:4rpx;
			text-align: center;
			padding:10rpx 0;
			transform: scale(0.8);
		}
		.right{
			width:40rpx;
			word-wrap: wrap;
			font-size: 22rpx;
			line-height: 26rpx;
			border:1px solid #fff;
			border-radius:6rpx;
			text-align: center;
			padding:10rpx 0;
			margin-left:40rpx;
		}
		.center{
			flex:1;
			.center_left{
				text-align: center;
				width:50%;
				.price{
					font-size: 40rpx;
					font-weight: bold;
				}
				.info{
					color:#A4A4A4;
					font-size: 16rpx;
					.info_text{
						text-decoration: underline;
						margin-left:4rpx;
					}
				}
			}
			.center_right{
				text-align: center;
				width:50%;
				.rule{
					font-size: 24rpx;
				}
				.limit{
					font-size: 16rpx;
					transform: scale(.8);
				}
				.time{
					font-size:12rpx ;
					border-radius: 16rpx;
					padding:4rpx;
					transform: scale(0.7);
				}
			}
		}
		&.copon{
			.left{
				background:#F6D32D;
				color:#C6272A;
			}
			.right{
				color:#F6D32D;
				border-color: #F6D32D;
			}
			.center_left{
				.price{
					color:#c6272a;
				}
			}
			.center_right{
				color:#757575;
				.rule{
					color:#191919;
				}
				.time{
					background:#E9ADAE;
				}
			}
		}
		&.copon_used{
			background:url(../../../static/image/coupon_used.png) no-repeat 100% 100%;
			.left,.right{
				background:#CCCCCC;
				color:#787878;
				border-color:#B3B3B3;
			}
			.center_left{
				.price{
					color:#CCCCCC;
				}
			}
			.center_right{
				color:#CCCCCC;
				.rule{
					color:#CCCCCC;
				}
				.time{
					background:#ECECEC;
				}
			}
		}
	}
}
</style>
<!-- <style lang="scss">
/deep/.uicon-checkbox-mark:before{
	transform: scale(.7);
}
.content{
	// #ifdef MP-WEIXIN
		padding:20rpx 56rpx;
	// #endif
	// #ifndef MP-WEIXIN
		padding:20rpx 0;
	// #endif
	.u-radio{
		margin:auto;
	}
	.copon_box{
// #ifdef MP-WEIXIN
		width:584rpx;
		height:152rpx;
// #endif
// #ifndef MP-WEIXIN
		width:638rpx;
		height:164rpx;
// #endif
		background:url(../../../static/image/coupon.png) no-repeat 100% 100%;
		padding:0 30rpx;
		margin-bottom:20rpx;
		.left{
			min-height: 150rpx;
			width:40rpx;
			word-wrap: wrap;
			font-size: 28rpx;
			line-height: 35rpx;
			border-radius:4rpx;
			text-align: center;
			padding:10rpx 0;
			transform: scale(0.8);
		}
		.right{
			width:46rpx;
			word-wrap: wrap;
			font-size: 22rpx;
			line-height: 26rpx;
			border:1px solid #fff;
			border-radius:6rpx;
			text-align: center;
			padding:10rpx 0;
			margin-left:30rpx;
		}
		.center{
			flex:1;
			.center_left{
				text-align: center;
				width:50%;
				.price{
					font-size: 40rpx;
					font-weight: bold;
				}
				.info{
					color:#A4A4A4;
					font-size: 16rpx;
					.info_text{
						text-decoration: underline;
						margin-left:4rpx;
					}
				}
			}
			.center_right{
				text-align: center;
				width:50%;
				.rule{
					font-size: 24rpx;
				}
				.limit{
					font-size: 16rpx;
					// #ifndef MP-WEIXIN
					transform: scale(.8);
					// #endif
				}
				.time{
					font-size:16rpx ;
					border-radius: 16rpx;
					padding:4rpx;
					// #ifndef MP-WEIXIN
					transform: scale(.7);
					line-height: 22rpx;
					// #endif
					// #ifdef MP-WEIXIN
					transform: scale(0.9);
					// #endif
				}
			}
		}
		&.copon{
			.left{
				background:#F6D32D;
				color:#C6272A;
			}
			.right{
				color:#F6D32D;
				border-color: #F6D32D;
			}
			.center_left{
				.price{
					color:#c6272a;
				}
			}
			.center_right{
				color:#757575;
				.rule{
					color:#191919;
				}
				.time{
					background:#E9ADAE;
				}
			}
		}
		&.copon_used{
			background:url(../../../static/image/coupon_used.png) no-repeat 100% 100%;
			.left,.right{
				background:#CCCCCC;
				color:#787878;
				border-color:#B3B3B3;
			}
			.center_left{
				.price{
					color:#CCCCCC;
				}
			}
			.center_right{
				color:#CCCCCC;
				.rule{
					color:#CCCCCC;
				}
				.time{
					background:#ECECEC;
				}
			}
		}
	}
}
</style>
 -->